import React, { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom'
import { PlusOutlined } from '@ant-design/icons';
import {
    message,
    Form,
    Input,
    Button,
    Radio,
    Select,
    Cascader,
    DatePicker,
    InputNumber,
    TreeSelect,
    Switch,
    Checkbox,
    Upload,
    Image,
} from 'antd';

import request, { baseUrl } from '@/utils/request'

const Edit = () => {
    const navigate = useNavigate()
    // 获取动态路由id
    const { id } = useParams();
    console.log('id', id)

    // 创建表单实例
    const [myform] = Form.useForm()

    const [goods, setGoods] = useState({})
    const getData = async () => {
        const { data } = await request.get('/goods/' + id)
        setGoods(data.data)

        // 给表单写入数据
        myform.setFieldsValue(data.data)
    }


    // 获取分类
    const [category,setCategory] = useState([])

    const submit = async ({ _id, ...values }) => {
        console.log('values', values)

        const { data } = await request.put('/goods/' + _id, values)
        if (data.code === 200) {
            message.success('商品修改成功')
            navigate('/manage/goods/list')
        }
    }
    useEffect(() => {
        getData()

        request.get('/category').then(({data})=>{
            setCategory(data.data.result)
        })
    }, [])

    return (
        <div>
            <Form
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 18 }}
                layout="horizontal"
                initialValues={goods}
                onFinish={submit}

                form={myform}
            >
                <Form.Item name="_id" hidden>
                    <Input />
                </Form.Item>
                <Form.Item label="商品名称" name="goods_name">
                    <Input />
                </Form.Item>
                <Form.Item label="商品分类" name='category'>
                    <Select>
                        {
                            category.map(item=>(

                                <Select.Option key={item._id} value={item.text}>{item.text}</Select.Option>
                            ))
                        }
                    </Select>
                </Form.Item>

                {/* <Form.Item label="DatePicker">
                    <DatePicker />
                </Form.Item> */}
                <Form.Item label="价格" name='sales_price'>
                    <InputNumber />
                </Form.Item>
                <Form.Item label="商品描述">
                    <Input.TextArea rows={4} />
                </Form.Item>
                <Form.Item label="是否上架" name='online' valuePropName="checked">
                    <Switch />
                </Form.Item>
                <Form.Item label="商品图片" valuePropName="fileList">
                    <Upload action="/upload.do" listType="picture-card">
                        {
                            goods.img_url ?
                                <Image src={baseUrl + goods.img_url} />
                                :
                                <div>
                                    <PlusOutlined />
                                    <div style={{ marginTop: 8 }}>Upload</div>
                                </div>

                        }
                    </Upload>
                </Form.Item>
                <Form.Item wrapperCol={{ offset: 4 }}>
                    <Button type='primary' htmlType='submit'>修改</Button>
                </Form.Item>
            </Form>

        </div>
    )
}


export default Edit;